<template>
  <div class="journal oa-bgcolor">
    <el-button
      type="primary"
      class="new-btn"
      @click="newBtn">写日志</el-button>
    <el-tabs
      v-model="activeName"
      @tab-click="tabClick">
      <el-tab-pane
        v-for="(item, index) in tabsData"
        :name="item.key"
        :key="index">
        <el-badge
          slot="label"
          :hidden="item.key != '3' || messageOANum.logNum == 0"
          :max="99"
          :value="messageOANum.logNum">
          <span>{{ item.label }}</span>
        </el-badge>
        <v-content
          id="journal-list-box"
          :ref="'log-list' + item.key"
          :active-name="activeName"
          :journal-data="journalData"
          :dep-options="depOptions"
          :name-options="nameOptions"
          :journal-loading="journalLoading"
          @selectChange="refreshLogList"
          @editBtn="editBtn">
          <p
            slot="load"
            class="load">
            <el-button
              :loading="loadMoreLoading"
              type="text">{{ loadText }}</el-button>
          </p>
        </v-content>
      </el-tab-pane>
    </el-tabs>
    <new-dialog
      v-if="showNewDialog"
      :form-data="formData"
      :dialog-title="dialogTitle"
      :img-file-list="imgFileList"
      :accessory-file-list="accessoryFileList"
      :new-loading="newLoading"
      @close="newClose"
      @submitBtn="submitBtn"/>
  </div>
</template>

<script>
import VContent from './content'
import newDialog from './newDialog'
import { mapGetters } from 'vuex'
import { objDeepCopy } from '@/utils'

// API
import {
  journalList,
  journalAdd,
  journalEdit
} from '@/api/oamanagement/journal'
import { depList, usersList } from '@/api/common'

export default {
  components: {
    VContent,
    newDialog
  },
  data() {
    return {
      activeName: '1',
      tabsData: [
        { label: '全部', key: '1' },
        { label: '我发出的日志', key: '2' },
        { label: '我收到的', key: '3' },
        { label: '未读', key: '4' }
      ],
      // 日志数据
      journalData: [],
      // 显示新建页面
      showNewDialog: false,
      // 新建数据
      formData: {},
      // 弹出框标题
      dialogTitle: '',
      // 页数
      pageNum: 1,
      loadText: '加载更多',
      loadMoreLoading: true,
      // 判断是否还有数据
      isPost: true,
      // 图片数组
      imgFileList: [],
      // 附件数组
      accessoryFileList: [],
      nameOptions: [],
      depOptions: [],
      // 列表加loading
      journalLoading: false,
      newLoading: false,
      // 列表容器
      listBoxDom: null
    }
  },
  computed: {
    ...mapGetters(['messageOANum']),
    byData() {
      return { '1': '', '2': '1', '3': '2', '4': '3' }[this.activeName] // 1:我发出的 2：我收到的 3：未读的
    }
  },
  watch: {
    $route(to, from) {
      this.$router.go(0)
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (to.query.routerKey == 1) {
      this.newBtn()
    }
    next()
  },
  mounted() {
    this.initControlPage()
    this.getLogList()
    if (this.$route.query.routerKey == 1) {
      this.newBtn()
    }
    // 部门列表
    depList().then(res => {
      this.depOptions = res.data
    })
    // 用户列表
    usersList({ pageType: 0 }).then(res => {
      this.nameOptions = res.data
    })
  },
  methods: {
    initControlPage() {
      // 分批次加载
      for (const dom of document.getElementsByClassName('list-box')) {
        dom.onscroll = e => {
          if (e && e.target.id === ('list-box' + this.activeName)) {
            this.$bus.emit('journal-list-box-scroll', e.target)
            const scrollOff = dom.scrollTop + dom.clientHeight - dom.scrollHeight
            // 滚动条到底部的条件
            if (Math.abs(scrollOff) < 10 && this.loadMoreLoading == true) {
              if (!this.isPost) {
                this.isPost = true
                this.pageNum++
                this.getLogList()
              } else {
                this.loadMoreLoading = false
              }
            }
          }
        }
      }
    },
    // 数据
    getLogList() {
      const params = objDeepCopy(
        this.$refs['log-list' + this.activeName][0].fromData
      )
      if (!params.createTime) {
        delete params['createTime']
      }
      params.page = this.pageNum
      params.limit = 5
      if (this.byData) {
        params.by = this.byData
      }
      this.journalLoading = true
      journalList(params)
        .then(res => {
          this.journalLoading = false
          if (res.data.lastPage === true) {
            this.loadText = '没有更多了'
            this.loadMoreLoading = false
          } else {
            this.loadText = '加载更多'
            this.loadMoreLoading = true
          }
          for (const item of res.data.list) {
            item.showComment = false
          }

          this.journalData = this.journalData.concat(res.data.list)
          this.createInitAwaitMessage()
          this.isPost = false
        })
        .catch(() => {
          this.journalLoading = false
          this.isPost = false
        })
    },
    createInitAwaitMessage() {
      if (!this.listBoxDom) {
        this.$nextTick(() => {
          this.listBoxDom = document.getElementsByClassName('list-box')[
            parseInt(this.activeName) - 1
          ]
          this.$bus.emit(
            'journal-list-box-scroll',
            document.getElementsByClassName('list-box')[
              parseInt(this.activeName) - 1
            ]
          )
        })
      }
    },
    // 写日志
    newBtn() {
      this.dialogTitle = '写日志'
      this.showNewDialog = true
      this.formData = {}
      this.imgFileList = []
      this.accessoryFileList = []
    },
    tabClick(val) {
      this.listBoxDom = null
      this.refreshLogList()
    },
    // 刷新列表
    refreshLogList() {
      this.pageNum = 1
      this.journalData = []
      this.getLogList()
    },
    // 关闭新建页面
    newClose() {
      if (this.$route.query.routerKey == 1) {
        this.$router.push('journal')
      } else {
        this.showNewDialog = false
      }
    },
    // 新建提交
    submitBtn(key, batchId, img, relevanceAll) {
      this.newLoading = true
      let obj = {}
      if (!relevanceAll) {
        obj = {}
      } else {
        obj = relevanceAll
      }
      // 获取部门
      const dep = []
      if (this.formData.depData) {
        for (const j of this.formData.depData) {
          dep.push(j.id)
        }
      }
      // 获取员工
      const staff = []
      if (this.formData.sentWhoList) {
        for (const h of this.formData.sentWhoList) {
          staff.push(h.userId)
        }
      }

      if (this.dialogTitle == '写日志') {
        // 图片
        const pramas = {
          categoryId: key || '',
          content: this.formData.content,
          tomorrow: this.formData.tomorrow,
          question: this.formData.question,
          batchId: batchId,
          // img: imgList,
          sendUserIds: staff.join(','),
          sendDeptIds: dep.join(','),
          customerIds: obj.customerIds.join(','),
          contactsIds: obj.contactsIds.join(','),
          businessIds: obj.businessIds.join(','),
          contractIds: obj.contractIds.join(',')
        }
        if (key) {
          this.formData.categoryId = key
        }
        journalAdd(pramas)
          .then(res => {
            this.refreshLogList()
            this.newLoading = false
            this.$message.success('新建成功')
            this.newClose()
          })
          .catch(() => {
            this.newLoading = false
            this.$message.error('新建失败')
          })
        // 编辑页面
      } else {
        const pramas = {
          logId: this.formData.logId,
          categoryId: key,
          content: this.formData.content,
          tomorrow: this.formData.tomorrow,
          question: this.formData.question,
          batchId: batchId,
          sendUserIds: staff.join(','),
          sendDeptIds: dep.join(','),
          customerIds: obj.customerIds.join(','),
          contactsIds: obj.contactsIds.join(','),
          businessIds: obj.businessIds.join(','),
          contractIds: obj.contractIds.join(',')
        }
        journalEdit(pramas)
          .then(res => {
            this.newClose()
            this.refreshLogList()
            this.$message.success('编辑成功')
            this.newLoading = false
          })
          .catch(() => {
            this.newLoading = false
            this.$message.error('编辑失败')
          })
      }
    },
    // 编辑按钮
    editBtn(val) {
      this.dialogTitle = '编辑日志'
      this.formData = val
      this.imgFileList = val.img
      // 附件
      this.accessoryFileList = val.file

      // 员工部门赋值
      this.formData.depData = val.sendDeptList ? val.sendDeptList : []
      this.formData.sentWhoList = val.sendUserList ? val.sendUserList : []
      this.showNewDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
@import '../styles/tabs.scss';

.journal {
  overflow: auto;
  position: relative;
  .new-btn {
    position: absolute;
    top: 10px;
    right: 40px;
    z-index: 999;
  }
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs /deep/ .el-tabs__content {
    padding: 0 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    min-height: 0;
    .el-tab-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
  }
  .load {
    color: #999;
    font-size: 13px;
    margin: 0 auto 15px;
    text-align: center;
    .el-button,
    .el-button:focus {
      color: #ccc;
      cursor: auto;
    }
  }
}

// 消息效果
.el-badge /deep/ .el-badge__content.is-fixed {
  top: 15px;
}
</style>
